<script setup>
import CreateView from '/src/components/CreateView.vue'
import {debounce} from 'throttle-debounce'
import { onMounted, ref, reactive} from "vue"

defineOptions({
  name: "XrCreateSingle"
})

const props = defineProps({
  title: String,
  loading: {
    type: Boolean,
    default: false
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
  confirmDisabled: {
    type: Boolean,
    default: false
  },
  confirmButtonText: {
    type: String,
    default: '保存'
  }
})

const emits = defineEmits(['afterEnter', 'save', 'close'])

function afterEnter() {
  emits('afterEnter')
}

function save() {
  emits('save')
}

function close() {
  emits('close')
}
</script>

<template>
  <teleport to="body" :disabled="!appendToBody">
    <CreateView v-bind:body-style="{ height: '100%'}" v-on:afterEnter="afterEnter">
      <flexbox v-loading="loading" direction="column" align="stretch" class="xr-create">
        <flexbox class="xr-create__header">
          <div v-if="!$slots.title" class="title">{{ title }}</div>
          <!-- title插槽-->
          <slot name="title"/>
          <i class="el-icon-close close" @click="close"/>
          <el-icon class="close" @click="close">
            <Close/>
          </el-icon>
        </flexbox>
        <div class="xr-create__body">
          <!-- 默认插槽-->
          <slot/>
        </div>
        <div class="xr-create__footer">
          <!-- footer-left插槽-->
          <slot name="footer-left"/>
          <el-button v-if="showCancel" v-on:click="close">取消</el-button>
          <!-- footer插槽-->
          <slot name="footer"/>
          <el-button v-if="showConfirm" v-bind:disabled="confirmDisabled" type="primary"
                     v-on:click="save()">
            {{ confirmButtonText }}
          </el-button>
        </div>
      </flexbox>
    </CreateView>
  </teleport>
</template>

<style lang="scss" scoped>
.xr-create {
  position: relative;
  height: 100%;
  padding: 20px 30px;

  &__header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;

    .title {
      flex: 1;
      font-size: 17px;
      color: #333;
      font-weight: bold;
    }

    .close {
      display: block;
      font-size: 24px;
      color: #909399;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }

    .close:hover {
      color: $xr-color-primary;
    }
  }

  &__body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }

  &__footer {
    position: relative;
    text-align: right;
    padding: 5px 20px 5px;
  }
}
</style>
